﻿<phone:PhoneApplicationPage 
    x:Class="Omnia.Wallet.Views.BUdgetsView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:es="clr-namespace:Microsoft.Expression.Shapes;assembly=Microsoft.Expression.Drawing" 
    xmlns:viewmodel="clr-namespace:Omnia.ViewModels;assembly=Omnia.ViewModels"
    xmlns:UX="clr-namespace:Omnia.UX;assembly=Omnia.UX"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="800" d:DesignWidth="480"
    shell:SystemTray.IsVisible="False" 
    xmlns:Converters="clr-namespace:Omnia.Converters;assembly=Omnia.Converters">
    
    <phone:PhoneApplicationPage.Resources>
        <Converters:StringToPathGeometryConverter x:Key="StringToPathGeometryConverter" />
    </phone:PhoneApplicationPage.Resources>
    
    
    <Grid x:Name="LayoutRoot">
        <Grid.DataContext>
            <viewmodel:BudgetViewModel/>
        </Grid.DataContext>
        <Grid.Background>
            <ImageBrush Stretch="{Binding GlobalSettings.BackgroundImageStretch}" ImageSource="{Binding BackgroundImageSource}"/>
        </Grid.Background>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="{StaticResource IDS_PAGE_TITLE}" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="{StaticResource IDS_PAGE_HEADER_BUDGETVIEW}" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="168"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition Height="auto"/>
            </Grid.RowDefinitions>
            
            <Grid Margin="12,0,0,0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="156"/>
                    <RowDefinition Height="auto"/>
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Grid Background="{StaticResource PhoneAccentBrush}">
                    <Path Data="{Binding Source={StaticResource PATH_MONTHLY}, Converter={StaticResource StringToPathGeometryConverter}}" 
                          Stretch="Uniform" Fill="#FFFFFFFF" Margin="30" RenderTransformOrigin="0.5,0.5">
                        <Path.RenderTransform>
                            <TransformGroup>
                                <TransformGroup.Children>
                                    <RotateTransform Angle="0" />
                                    <ScaleTransform ScaleX="1" ScaleY="1" />
                                </TransformGroup.Children>
                            </TransformGroup>
                        </Path.RenderTransform>
                    </Path>
                </Grid>

                <Grid Grid.Row="1" Background="{StaticResource PhoneSubtleBrush}">
                    <StackPanel Margin="0,24,0,0">
                        <TextBlock Style="{StaticResource PhoneTextTitle3Style}" 
                                   Text="{Binding Path=TotalExpense}" 
                                   HorizontalAlignment="Right" 
                                   Foreground="{StaticResource PhoneBackgroundBrush}"/>
                        <Grid Background="{StaticResource PhoneAccentBrush}">
                            <TextBlock Style="{StaticResource PhoneTextTitle3Style}" 
                                       Text="{Binding Path=TotalBudget}" HorizontalAlignment="Right"/>
                        </Grid>
                    </StackPanel>
                </Grid>
                <Grid Grid.Row="2" Background="{StaticResource PhoneSubtleBrush}">
                    <ListBox ItemsSource="{Binding Path=OverspendCollection}">
                        <ListBox.ItemContainerStyle>
                            <Style TargetType="ListBoxItem">
                                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                            </Style>
                        </ListBox.ItemContainerStyle>
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition/>
                                        <ColumnDefinition Width="auto"/>
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Style="{StaticResource PhoneTextNormalStyle}" 
                                               Text="{Binding Date, StringFormat=\{0:yy-MM\}}" 
                                               Foreground="{StaticResource PhoneChromeBrush}" />
                                    <TextBlock Style="{StaticResource PhoneTextNormalStyle}" 
                                               Text="{Binding Balance}"
                                               Grid.Column="1" 
                                               Foreground="{StaticResource PhoneChromeBrush}"/>
                                </Grid>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                </Grid>
                <es:RegularPolygon PointCount="3" 
                                           VerticalAlignment="Top" 
                                           StrokeThickness="0"  
                                           Fill="{StaticResource PhoneAccentBrush}" 
                                           Grid.Row="1" 
                                           Height="22" Width="22" 
                                           RenderTransformOrigin=".5,.5" 
                                           Margin="90,-7,0,0">
                    <es:RegularPolygon.RenderTransform>
                        <TransformGroup>
                            <TransformGroup.Children>
                                <RotateTransform Angle="180" />
                                <ScaleTransform ScaleX="1" ScaleY="1" />
                            </TransformGroup.Children>
                        </TransformGroup>
                    </es:RegularPolygon.RenderTransform>
                </es:RegularPolygon>
            </Grid>
            <ListBox Grid.Column="1" HorizontalContentAlignment="Stretch" ItemsSource="{Binding Path=BudgetsCollection}">
                <ListBox.ItemContainerStyle>
                    <Style TargetType="ListBoxItem">
                        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                    </Style>
                </ListBox.ItemContainerStyle>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                                <ColumnDefinition Width="auto"/>
                            </Grid.ColumnDefinitions>
                            <TextBlock Text="{Binding Path=Date, StringFormat=\{0:yyyy-MM\}}" 
                                       Style="{StaticResource PhoneTextTitle3Style}"/>
                            <TextBlock Grid.Column="1" Style="{StaticResource PhoneTextTitle3Style}">
                                <Run Text="{Binding Outlay}" Foreground="{StaticResource PhoneAccentBrush}"/>
                                <Run Text=" / "/>
                                <Run Text="{Binding Value}"/>
                            </TextBlock>
                        </Grid>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
            
            <Grid Grid.ColumnSpan="2" Grid.Row="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition Width="auto"/>
                </Grid.ColumnDefinitions>
                <TextBox Text="{Binding Path=ItemToAdd.Value, Mode=TwoWay}" InputScope="Number"/>
                <StackPanel Grid.Column="1" Orientation="Horizontal">
                    <UX:UXPathButton Margin="12" 
                                     Command="{Binding AddBudgetCommand}"
                                     IconPath="{StaticResource PATH_ICON_CLOSE}"
                                     Angle="45"
                                     Padding="13"/>

                    <UX:UXPathButton Margin="12,0,0,0" 
                                     IconPath="{StaticResource PATH_ICON_EDIT}" 
                                     Command="{Binding UpdateBudgetCommand}"
                                     />
                        
                </StackPanel>
            </Grid>
        </Grid>
    </Grid>

</phone:PhoneApplicationPage>
